<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> MemoUs - Make Memo on User </title>
  <style>
	input[type=text]
	{
		border: solid 1px darkgray;
	}
	
	input[type=submit]
	{
		border: solid 1px darkgray;
		background-color: white;
	}

	.user_list
	{
		border: solid 1px darkgray;
		width: 100px;
	}

	.portals_list
	{
		border: solid 1px darkgray;
		width: 100px;
	}

	.notification_error
	{
		display: block;
		color: #ff0000;
	}

	.notification_msg
	{
		display: block;
		color: #008000;
	}

	.notification_hidden
	{
		display: none;
	}

	.add_user_form
	{
		display: block;
	}

	.add_user_form_hidden
	{
		display: none;
	}

  </style>
  <script>
	var req = new XMLHttpRequest();
	var gNotificationDiv = null;
	var gPortalsSelect = null;

    // Handler to clear notification message
    var gNotificationClearInterval;

	// Whether we receive form form server
	var gIsAddFormLoaded = false;
	var gAddUserForm = null;

	var gArPortals = new Array();
	var gArUsers = new Array();

//	var gBaseUrl = "http://127.0.0.1/sf_sandbox_12/web/memous.php";
    var gBaseUrl = "http://127.0.0.1:10778";
	//req.open("GET", "http://127.0.0.1/sf_sandbox_12/web/memous_dev.php/user", true);
	//req.onload = ShowContent;
	//req.send(null);

	window.onload = function()
	{
		gNotificationDiv = document.getElementById("NotificationDiv");
		gPortalsSelect = document.getElementById("PortalsList");
		LoadListOfPortals();
		//CreateUserList(JSON.parse("[{\"Id\":1,\"Name\":\"Ilona\"},{\"Id\":2,\"Name\":\"Saulytes\"},{\"Id\":3,\"Name\":\"Glamour\"}]"));
		//var jsonPortals = JSON.parse("[{\"Id\":1,\"Name\":\"Draugas.lt\"},{\"Id\":2,\"Name\":\"Xxx\"}]");
		//CreatePortalsListValues(jsonPortals);

	}

	/**
	 *	Sends user information on server
	 */
	function OnSaveUserInformationClicked()
	{
		var sData = "?portal=";
		sData += document.getElementById("user_info_portal_id").value;
		alert("POSTing form: " + sData);
		req.open("POST", gBaseUrl + "/user/getcreate", true);
		req.onload = OnSaveUserInfomrationCompleted;
		req.send(sData);
	}

	function OnSaveUserInfomrationCompleted()
	{
		alert("Got from /user/getcreate/" + req.responseText);
		NotifyUser(req.responseText, false);
	}

	function OnShowAddUserFormClicked()
	{
		if( gPortalsSelect.selectedIndex < 1 )
		{
			NotifyUser("Select portal to add user to!", true);
			return;
		}

		req.open("GET", gBaseUrl + "/user/getcreate/portal/" + gArPortals[gPortalsSelect.selectedIndex - 1], true);
		req.onload = function()
		{
			gAddUserForm = document.getElementById("AddUserForm");
			gAddUserForm.innerHTML = req.responseText;
			gAddUserForm.className = "add_user_form";
		};
		req.send(null);
	}

	function LoadListOfPortals()
	{
//		req.open("GET", gBaseUrl + "/user/getportals", true);
        req.open("GET", gBaseUrl + "/portal/", true);
		req.onload = OnLoadListOfPortalsCompleted;
        req.onerror = OnLoadListOfPortalsFailed;
		req.send(null);
	}

    function OnLoadListOfPortalsFailed()
    {
        NotifyUser("Error loading list of portals!", true);
    }

	function OnLoadListOfPortalsCompleted()
	{
		NotifyUser("Got list of portals", false);
		var arPortals = JSON.parse(req.responseText);
		CreatePortalsListValues(arPortals);
	}

	/**
	 * Creates options in portals list select tag
	 */
	function CreatePortalsListValues(jsonPortals)
	{
		NotifyUser("Creating portals...");
		gPortalsSelect.length = 0;
		var item = null;
		gArPortals = new Array();

		item = document.createElement("option");
		item.text = "----";
		item.value = 0;
		gPortalsSelect.add(item, null);

		for( var i = 0; i < jsonPortals.length; i++ )
		{
			gArPortals[gArPortals.length] = jsonPortals[i]["Id"];
			item = document.createElement("option");
			item.text = jsonPortals[i]["Name"];
			item.value = jsonPortals[i]["Id"];
			gPortalsSelect.add(item, null);
		}
	}

	/**
	 * Sends form data to server if form is valid
	 */
	function OnSubmitButtonClicked()
	{
		var nick = document.getElementById("nick").value;
		var kwd = document.getElementById("kwd").value;
		//console.debug("Nick: " + nick + ", " + nick.length);
		if( (nick.length > 0) || (kwd.length > 0) )
		{
			NotifyUser("Performing search...", false);
		}else
		{
			NotifyUser("Enter user nick or keyword to search!", true);
		}
	}

	function OnAllUsersClicked()
	{
		if( gPortalsSelect.selectedIndex > 0 )
		{
			LoadPortalUsers(gPortalsSelect.selectedIndex);
		}else
		{
			NotifyUser("Select portal first!", true);
		}
	}

	function LoadPortalUsers(portalId)
	{
		req.open("GET", gBaseUrl + "/user/getbyportal/id/" + portalId);
		req.onload = OnPortalsUsersLoaded;
		req.send(null);
	}

	function OnPortalsUsersLoaded()
	{
		NotifyUser("Got user of portals...");
		//alert(req.responseText);
		var jsonUsers = JSON.parse(req.responseText);
		CreateUserList(jsonUsers);
	}

	function CreateUserList(jsonUsers)
	{
		var usersUl = document.getElementById("UsersList");
		usersUl.length = 0;
		
		for( var i = 0; i < jsonUsers.length; i++ )
		{
			item = document.createElement("option");
			item.text = jsonUsers[i]["Name"];
			item.value = jsonUsers[i]["Id"];
			usersUl.add(item, null);
		}
	}

	function OnSelectedUserChanged()
	{
		var usersUl = document.getElementById("UsersList");

	}

	/**
	 * Displays notification to user
	 */
	function NotifyUser(msg, isError)
	{
        if( gNotificationClearInterval != null )
        {
            clearInterval(gNotificationClearInterval);
        }
		gNotificationDiv.innerText = msg;
		gNotificationDiv.className = isError ? "notification_error" : "notification_msg";
        gNotificationClearInterval = setTimeout(
                function()
                {
                    gNotificationDiv.innerText = "";
                    gNotificationClearInterval = null;

                }, 5000);
	}

  </script>
 </head>

 <body>
	<div style="width: 500px;">
		<div id="NotificationDiv" class="notification_hidden">...</div>
		<div style="width: 100px; float: left; height: 100%; margin-right: 5px;">
			<select id="PortalsList" class="portals_list">
				<option value="0">----</option>
			</select><br />
			<a href="#" onclick="OnAllUsersClicked(); return false;">All</a>
			<a href="#" onclick="OnShowAddUserFormClicked(); return false;">Add</a> <br />
			<select id="UsersList" size="20" onchange="OnSelectedUserChanged();" class="user_list">
			</select>
		</div>
		<div style="width: 195px; float: left; height: 100%;">
			<label for="nick">Nick</label>
			<input type="text" name="nick" id="nick" value="" style="width: 100px;" onkeypress="if(event.keyCode == 13){ OnSubmitButtonClicked(); return false; }" /><br />
			<label for="kwd">Keyword</label>
			<input type="text" name="kwd" id="kwd" value="" style="width: 100px;"  onkeypress="if(event.keyCode == 13){ OnSubmitButtonClicked(); return false; }" /><br />
			<input type="submit" value="Search" id="submit" onclick="OnSubmitButtonClicked(); return false;" /><br /><br />

			<div id="AddUserForm" class="add_user_form_hidden"><div>
		</div>
	</div>
 </body>
</html>
